<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Fluenty Survey</title>
    <style>
      body {
        margin: 0 auto;
        padding: 0;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
          'Helvetica Neue', sans-serif;
        background-color: #fff;
        max-width: 600px;
      }
      .container {
        padding: 20px;
        display: flex;
        flex-direction: column;
        min-height: 100vh;
      }
      .nav-progress-container {
        display: flex;
        align-items: center;
        margin-bottom: 30px;
        gap: 15px;
      }
      .back-button {
        width: 30px;
        height: 30px;
        border: none;
        background: none;
        cursor: pointer;
        color: #2b85e4;
        font-size: 20px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .back-button svg {
        width: 20px;
        height: 20px;
        fill: currentColor;
      }
      .progress-bar {
        flex: 1;
        height: 6px;
        background-color: #e0e0e0;
        border-radius: 3px;
      }
      .progress {
        height: 100%;
        width: 93.24%;
        background-color: #2b85e4;
        border-radius: 3px;
      }
      .title {
        font-size: 36px;
        font-weight: bold;
        color: #0B4983;
        margin-bottom: 20px;
        line-height: 1.3;
        text-align: center;
      }
      .subtitle {
        font-size: 22px;
        font-weight: 500;
        color: #333;
        margin-bottom: 50px;
        text-align: center;
      }
      .date-section {
        margin-bottom: 30px;
      }
      .date-label {
        font-size: 20px;
        font-weight: 500;
        color: #666;
        margin-bottom: 15px;
      }
      .date-input {
        width: calc(100% - 42px);
        padding: 15px 20px;
        font-size: 18px;
        color: #333;
        background-color: white;
        border: 1px solid #e0e0e0;
        border-radius: 16px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
      }
      .date-input:focus {
        outline: none;
        border-color: #2b85e4;
        box-shadow: 0 2px 12px rgba(43, 133, 228, 0.15);
      }
      .date-input-text {
        color: #999;
      }
      .calendar-icon {
        color: #666;
        font-size: 24px;
      }

      /* Calendar popup styles */
      .calendar-popup {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 350px;
        background-color: white;
        border-radius: 16px;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
        z-index: 100;
        padding: 0;
        overflow: hidden;
      }
      .calendar-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        border-bottom: 1px solid #eee;
      }
      .month-year {
        font-size: 22px;
        font-weight: 600;
        color: #333;
        text-align: center;
        flex: 1;
      }
      .calendar-nav {
        color: #2b85e4;
        font-size: 24px;
        cursor: pointer;
        background: none;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
      }
      .calendar-body {
        padding: 10px;
      }
      .weekdays {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        text-align: center;
        font-weight: 600;
        color: #333;
        margin-bottom: 10px;
        font-size: 16px;
      }
      .weekday {
        padding: 10px 0;
      }
      .days-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 8px;
      }
      .day {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        cursor: pointer;
        font-size: 16px;
        color: #666;
        margin: 0 auto;
      }
      .day.current-month {
        color: #333;
      }
      .day.selected {
        background-color: #2b85e4;
        color: white;
        border: 2px solid #2b85e4;
      }
      .day:hover:not(.selected) {
        background-color: #f5f5f5;
      }
      .overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.4);
        z-index: 50;
      }
      .continue-button {
        background-color: #b2daff;
        color: white;
        border: none;
        border-radius: 12px;
        padding: 16px;
        font-size: 18px;
        font-weight: bold;
        width: calc(100% - 60px);
        cursor: pointer;
        text-align: center;
        margin-top: auto;
        margin-bottom: 20px;
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        max-width: 500px;
        transition: background-color 0.2s ease;
      }
      .continue-button:disabled {
        background-color: #b2daff;
        cursor: not-allowed;
        opacity: 0.8;
      }
      .continue-button.active {
        background-color: #3b82f6;
      }
      .continue-button.active:hover {
        background-color: #2563eb;
      }
      @media (max-width: 480px) {
        .title {
          font-size: 32px;
        }
        .subtitle {
          font-size: 18px;
        }
        .calendar-popup {
          width: 90%;
          max-width: 350px;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="nav-progress-container">
        <button class="back-button">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
          </svg>
        </button>
        <div class="progress-bar">
          <div class="progress"></div>
        </div>
      </div>

      <h1 class="title">When is the event planned?</h1>
      <h2 class="subtitle">We will consider this date when preparing your personalized plan.</h2>

      <div class="date-section">
        <div class="date-label">Event Starts</div>
        <div class="date-input" id="dateInput">
          <span class="date-input-text">Choose date</span>
          <span class="calendar-icon">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M7 11H9V13H7V11ZM7 15H9V17H7V15ZM11 11H13V13H11V11ZM11 15H13V17H11V15ZM15 11H17V13H15V11ZM15 15H17V17H15V15Z"
                fill="#999"
              />
              <path
                d="M19 3H18V1H16V3H8V1H6V3H5C3.89 3 3 3.9 3 5V19C3 20.1 3.89 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM19 19H5V8H19V19Z"
                fill="#999"
              />
            </svg>
          </span>
        </div>
      </div>

      <button class="continue-button" id="continueButton" disabled>Continue</button>

      <div class="overlay" id="overlay"></div>
      <div class="calendar-popup" id="calendarPopup">
        <div class="calendar-header">
          <button class="calendar-nav prev-month">&#10094;</button>
          <div class="month-year">Mar 2025</div>
          <button class="calendar-nav next-month">&#10095;</button>
        </div>
        <div class="calendar-body">
          <div class="weekdays">
            <div class="weekday">Mo</div>
            <div class="weekday">Tu</div>
            <div class="weekday">We</div>
            <div class="weekday">Th</div>
            <div class="weekday">Fr</div>
            <div class="weekday">Sa</div>
            <div class="weekday">Su</div>
          </div>
          <div class="days-grid" id="daysGrid">
            <!-- Days will be generated by JavaScript -->
          </div>
        </div>
      </div>
    </div>

    <script>
      document.addEventListener('DOMContentLoaded', function () {
        const backButton = document.querySelector('.back-button');
        const dateInput = document.getElementById('dateInput');
        const dateInputText = document.querySelector('.date-input-text');
        const calendarPopup = document.getElementById('calendarPopup');
        const overlay = document.getElementById('overlay');
        const prevMonthBtn = document.querySelector('.prev-month');
        const nextMonthBtn = document.querySelector('.next-month');
        const monthYearDisplay = document.querySelector('.month-year');
        const daysGrid = document.getElementById('daysGrid');
        const continueButton = document.getElementById('continueButton');

        let currentDate = new Date(); // Today's date
        let selectedDate = null; // No date selected by default

        // 从 localStorage 中获取之前保存的日期
        const pageName = window.location.pathname.split('/').pop().split('.')[0];
        const storedData = localStorage.getItem(pageName);
        if (storedData) {
            const parsedData = JSON.parse(storedData);
            selectedDate = new Date(parsedData.date);
            dateInputText.textContent = parsedData.formattedDate;
            continueButton.disabled = false;
            continueButton.classList.add('active');
        }

        // Initialize calendar
        generateCalendar(currentDate);

        // Set default input text
        if (!selectedDate) {
            dateInputText.textContent = 'Choose date';
        }

        // Back button functionality
        backButton.addEventListener('click', function () {
            window.location.href = 'areThere.html';
        });

        // Date input click handler
        dateInput.addEventListener('click', function () {
            showCalendar();
        });

        // Calendar navigation
        prevMonthBtn.addEventListener('click', function () {
            currentDate.setMonth(currentDate.getMonth() - 1);
            updateCalendar();
        });

        nextMonthBtn.addEventListener('click', function () {
            currentDate.setMonth(currentDate.getMonth() + 1);
            updateCalendar();
        });

        // Close calendar when clicking outside
        overlay.addEventListener('click', hideCalendar);

        // Continue button click handler
        continueButton.addEventListener('click', function () {
            if (selectedDate) {
                // 获取页面标题和当前页面名称
                const pageTitle = document.querySelector('.title')
                  ? document.querySelector('.title').textContent.trim()
                    : 'When is the event planned?';
                const subtitle = document.querySelector('.subtitle')
                  ? document.querySelector('.subtitle').textContent.trim()
                    : 'We will consider this date when preparing your personalized plan.';

                const formattedDate = formatDate(selectedDate);

                // 创建数据对象
                const data = {
                    title: pageTitle,
                    subtitle: subtitle,
                    value: formattedDate,
                    date: selectedDate.toISOString(), // 保存 ISO 格式方便后续处理
                    formattedDate: formattedDate,
                };

                // 以 JSON 格式存储到 localStorage
                localStorage.setItem(pageName, JSON.stringify(data));

                // 保留原有存储方式，以保证兼容性
                localStorage.setItem('selectedDate', selectedDate.toISOString());

                // Navigate to createYour.html
                window.location.href = 'createYour.html';
            }
        });

        // Show calendar popup
        function showCalendar() {
            calendarPopup.style.display = 'block';
            overlay.style.display = 'block';
        }

        // Hide calendar popup
        function hideCalendar() {
            calendarPopup.style.display = 'none';
            overlay.style.display = 'none';
        }

        // Update calendar display
        function updateCalendar() {
            monthYearDisplay.textContent = formatMonthYear(currentDate);
            generateCalendar(currentDate);
        }

        // Generate calendar days
        function generateCalendar(date) {
            daysGrid.innerHTML = '';

            const year = date.getFullYear();
            const month = date.getMonth();

            // Update month and year display
            monthYearDisplay.textContent = formatMonthYear(date);

            // Get first day of month and number of days
            const firstDay = new Date(year, month, 1);
            const lastDay = new Date(year, month + 1, 0);

            // Get day of week for first day (0 = Sunday, 1 = Monday, etc.)
            let firstDayOfWeek = firstDay.getDay() - 1; // Adjust for Monday start
            if (firstDayOfWeek < 0) firstDayOfWeek = 6; // Sunday becomes 6

            // Create prev month days
            const daysInPrevMonth = new Date(year, month, 0).getDate();
            for (let i = 0; i < firstDayOfWeek; i++) {
                const day = daysInPrevMonth - firstDayOfWeek + i + 1;
                const dayElement = createDayElement(day, false, new Date(year, month - 1, day));
                daysGrid.appendChild(dayElement);
            }

            // Create current month days
            const daysInMonth = lastDay.getDate();
            for (let i = 1; i <= daysInMonth; i++) {
                const dayElement = createDayElement(i, true, new Date(year, month, i));
                daysGrid.appendChild(dayElement);
            }

            // Calculate how many days from next month to show
            const totalCells = 42; // 6 rows * 7 days
            const remainingCells = totalCells - (firstDayOfWeek + daysInMonth);

            // Create next month days
            for (let i = 1; i <= remainingCells; i++) {
                const dayElement = createDayElement(i, false, new Date(year, month + 1, i));
                daysGrid.appendChild(dayElement);
            }

            // 如果有选中日期，重新标记选中状态
            if (selectedDate) {
                const selectedDayElement = document.querySelector(`.day[data-date="${selectedDate.toISOString()}"]`);
                if (selectedDayElement) {
                    selectedDayElement.classList.add('selected');
                }
            }
        }

        // Create a day element for the calendar
        function createDayElement(day, isCurrentMonth, date) {
            const dayElement = document.createElement('div');
            dayElement.classList.add('day');
            dayElement.textContent = day;
            dayElement.setAttribute('data-date', date.toISOString());

            if (isCurrentMonth) {
                dayElement.classList.add('current-month');
            }

            // Check if this date is the selected date
            if (selectedDate && date.toDateString() === selectedDate.toDateString()) {
                dayElement.classList.add('selected');
            }

            // Check if date is in the past (before today) or is today
            const today = new Date();
            today.setHours(0, 0, 0, 0);
            const tomorrow = new Date(today);
            tomorrow.setDate(tomorrow.getDate() + 1);
            const isDateDisabled = date < tomorrow; // Disable today and past dates

            if (isDateDisabled) {
                dayElement.style.color = '#ccc';
                dayElement.style.cursor = 'default';
            } else {
                // Add click handler only to future dates (tomorrow onwards)
                dayElement.addEventListener('click', function () {
                    // Remove selected class from all days
                    document.querySelectorAll('.day').forEach(el => {
                        el.classList.remove('selected');
                    });

                    // Add selected class to clicked day
                    dayElement.classList.add('selected');

                    // Update selected date
                    selectedDate = date;

                    // Update input field text
                    dateInputText.textContent = formatDate(date);

                    // Activate continue button
                    continueButton.disabled = false;
                    continueButton.classList.add('active');

                    // Hide calendar
                    hideCalendar();
                });
            }

            return dayElement;
        }

        // Format date as "Month Day, Year"
        function formatDate(date) {
            const options = { year: 'numeric', month: 'long', day: 'numeric' };
            return date.toLocaleDateString('en-US', options);
        }

        // Format month and year as "Month Year"
        function formatMonthYear(date) {
            const options = { year: 'numeric', month: 'short' };
            return date.toLocaleDateString('en-US', options);
        }
    });
    </script>
  </body>
</html>
